<template>
    <div class="applyFor warp">
      <el-card shadow="always">
        <div class="tit_big">
          <p>循环物资发布申请</p>
        </div>
        <div>
          <el-form ref="form" :model="form" :rules="rules"  label-width="150px">
            <el-row :gutter="24">
              <el-col :span="12">
              <el-form-item label="物资名称:" prop="name">
                <el-input v-model="form.name" size="mini" style="width: 80%"></el-input>
              </el-form-item>
              </el-col>
            </el-row>
          
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="联系人名称:" prop="contacts">
                  <el-input v-model="form.contacts" size="mini" style="width: 80%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"> 
                <el-form-item label="联系方式:" prop="phone">
                  <el-input v-model="form.phone" size="mini" style="width: 80%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="物资数量:" prop="total_supply">
                  <el-input v-model="form.total_supply" size="mini" style="width: 80%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"> 
                <el-form-item label="截止时间:" prop="sell_date">
                  <el-date-picker
                    v-model="form.sell_date"
                    type="date"
                    value-format='yyyy-MM-dd'
                    placeholder="选择日期"
                    style="width: 80%"
                    size="mini">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="型号规格:" prop="specification">
                  <el-input v-model="form.specification" size="mini" style="width: 80%"></el-input>
                </el-form-item> 
              </el-col>
              <el-col :span="12"> 
                <el-form-item label="价格:" prop="transaction_price">
                  <el-input v-model="form.transaction_price" size="mini" style="width: 80%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="地区:" prop="location">
                  <el-input v-model="form.location" size="mini" style="width: 80%"></el-input>
                </el-form-item> 
              </el-col>
              <el-col :span="12"> 
                <el-form-item label="存放方式:" prop="storage">
                  <el-input v-model="form.storage" size="mini" style="width: 80%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="结算方式:" prop="settlement">
                  <el-input v-model="form.settlement" size="mini" style="width: 80%"></el-input>
                </el-form-item> 
              </el-col>
              <el-col :span="12"> 
                <el-form-item label="运输费用:" prop="transport_cost">
                  <el-input v-model="form.transport_cost" size="mini" style="width: 80%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="所在省份:" prop="province_id">
                  <el-cascader
                    v-model="provinceAll"
                    :options="provinceOptions"
                    @change="provinceChange"
                    size="mini"
                    style="width: 80%">
                  </el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属分类" prop="category_id">
                  <el-cascader
                    v-model="type_id"
                    :options="class_idOptions"
                    :props="{ value: 'id', label:'classname'}"
                    @change="classIdChange"
                    size="mini"
                    style="width:80%">
                  </el-cascader>
                </el-form-item>
              </el-col>
            </el-row> 
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="是否含税" prop="is_Including_tax">
                  <el-radio-group v-model="form.is_Including_tax">
                    <el-radio :label="'0'">不含税</el-radio>
                    <el-radio :label="'1'">含税</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="物资类型" prop="is_business">
                  <el-radio-group v-model="form.is_business">
                    <el-radio :label="'1'">出租</el-radio>
                    <el-radio :label="'2'">出售</el-radio>
                    <el-radio :label="'3'">求租</el-radio>
                    <el-radio :label="'4'">求购</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row> 
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item v-if="form.is_Including_tax == '1'" label="含税信息:" prop="tax_included_info">
                  <el-input v-model="form.tax_included_info" size="mini" style="width: 80%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            
          <!-- ---------------------------------------------------------------- -->
            <el-form-item label="物资简介" prop="details">
              <quill-editor ref="myTextEditor" style="width: 95%" v-model="form.details"
                :options="editorOption"  @blur="ChangeFn('details')">
              </quill-editor>
            </el-form-item>
          <!-- ----------------------------- -->
            <el-form-item label="图片" prop="images">
            <div class="fu_two_pic">
              <el-upload
                  :action="imgurls + '/api/Common/upload'"
                  list-type="picture-card"
                  :limit="15"
                  multiple
                  :file-list="fileList2"
                  :on-success="handleAvatarSuccess"
                  :on-remove="handleRemove"
                  :on-change="handleEditChange"
                  :class="{ hide: hideUploadBtn }">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="fileList2" slot-scope="{ file }">
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="imgurls + file.url" alt=""
                      >
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-delete"
                          @click="handleRemove"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                </el-upload>
              <div class="delAll" @click="deleteAllPic">全部删除</div>
            </div>
            </el-form-item>
            <!-- <el-form-item label="视频">
              <el-upload class="upload-demo" :action="imgurls + '/admin/common/file'" :on-success="fileSuccess2"
                :file-list="fileList" :limit="1">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">文件大小不超过500kb,只限上传一个！</div>
              </el-upload>
            </el-form-item> -->
        </el-form>
            <div class="divDialogFooter">
                <v-btn type="default" size="middle" @click="cancelClick" class="btn_zx">
                  取 消
                </v-btn>
                <v-btn type="plain" size="middle" @click="save()">
                  保 存
                </v-btn>
            </div>
        </div>
      </el-card>
    </div>
</template>
<script>
import {timeInter} from '@/utils/auth'
import vBtn from '@/components/title/b-btn.vue'
import {wasteApply,LotsTypeList,areaTree} from '@/api/interface'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor, Quill } from 'vue-quill-editor' //引入插件
export default{
    name:'applyFor',
    components: {
        quillEditor,vBtn
    },
    data(){
        const validatePhone = (rule, value, callback) => {
            // 判断输入框中是否输入手机号
            if (!value) {
                callback(new Error('请输入咨询人联系方式'))
            }
            //正则表达式进行验证手机号，从1开始，第二位是345789中的任意一位，以9数字结尾
            if (!/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value)) {
                callback(new Error('手机号格式不正确'))
            }
            callback()
        };
        return{
            provinceOptions:[], //省
            provinceAll:[],
            type_id:[],
            form:{
                name:"",
                details:"",
                images:'',
                category_id:'',
                category_ids:'',
                province_id:"",
                city_id:"",
                area_id:"",
                is_business:"1",
                contacts:"",
                phone:"",
                total_supply:"",
                sell_date:null,
                specification:"",
                transaction_price:"",
                location:"",
                storage:"",
                is_Including_tax:"0",
                tax_included_info:"",
                settlement:"",
                transport_cost:"",
            },
            rules: {
            name: [{ required: true, trigger: 'blur',message:'请输入标的名称'}],
            category_id: [{ required: true, trigger: 'change',message:'请选择所属分类'}],
            category_ids: [{ required: true, trigger: 'change',message:'请选择所属分类'}],
            province_id: [{ required: true, trigger: 'change', message:'请选择省份'}],
            city_id: [{ required: true, trigger: 'change', message:'请选择省份'}],
            area_id: [{ required: true, trigger: 'change', message:'请选择省份'}],
            is_business: [{ required: true, trigger: 'change',message:'请选择物资类型' }],
            is_Including_tax: [{ required: true, trigger: 'change',message:'请选择是否含税' }],
            contacts: [{ required: true, trigger: 'blur',message:'请输入联系人名称'}],
            phone: [{ required: true, trigger: 'blur', validator: validatePhone,}],
            total_supply: [{ required: true, trigger: 'blur',message:'请输入物资数量'}], 
            sell_date: [{ required: true, trigger: 'change',message:'请选择可售时间'}], 
            specification: [{ required: true, trigger: 'blur',message:'请输入型号规格'}], 
            transaction_price: [{ required: true, trigger: 'blur',message:'请输入出售/出租价格'}], 
            location: [{ required: true, trigger: 'blur',message:'请输入地区'}], 
            settlement: [{ required: true, trigger: 'blur',message:'请输入结算方式'}], 
            storage: [{ required: true, trigger: 'blur',message:'请输入存放方式'}], 
            transport_cost: [{ required: true, trigger: 'blur',message:'请输入运输费用'}], 
            tax_included_info: [{ required: true, trigger: 'blur',message:'请输入含税信息 '}], 
            details:[{ required: true,  message: '必填'}],
            images:[{ required: true, trigger: 'blur'}]
            },
            class_idOptions:[],//所属分类
            hideUploadBtn: false, //图片上传class
            fileList2:[],//图片上传
            picturesArr:[],
            editorOption: {
                modules: {
                    toolbar: [
                    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                    // ["blockquote", "code-block"], // 引用  代码块
                    [{
                        header: 1
                    }, {
                        header: 2
                    }], // 1、2 级标题
                    [{
                        list: "ordered"
                    }, {
                        list: "bullet"
                    }], // 有序、无序列表
                    [{
                        script: "sub"
                    }, {
                        script: "super"
                    }], // 上标/下标
                    [{
                        indent: "-1"
                    }, {
                        indent: "+1"
                    }], // 缩进
                    // [{'direction': 'rtl'}],                         // 文本方向
                    [{
                        size: ["small", false, "large", "huge"]
                    }], // 字体大小
                    [{
                        header: [1, 2, 3, 4, 5, 6, false]
                    }], // 标题
                    [{
                        color: []
                    }, {
                        background: []
                    }], // 字体颜色、字体背景颜色
                    [{
                        font: []
                    }], // 字体种类
                    [{
                        align: []
                    }], // 对齐方式
                    ["clean"], // 清除文本格式
                    ], //工具菜单栏配置
                },
                placeholder: "请在这里添加产品描述", //提示
                readyOnly: false, //是否只读
                theme: "snow", //主题 snow/bubble
                syntax: true, //语法检测
                },
        }
    },
    created(){
      this.form.is_business =this.$route.query.type;
        this.getlotsTypeList();
    },
    methods:{
        //提交表单数据
        save(){
            this.form.images = this.picturesArr.join(',');
            this.$refs.form.validate((valid) => {
            if (valid) {
                let obj =JSON.parse(JSON.stringify(this.form));
                obj.sell_date = timeInter(obj.sell_date);
                
                wasteApply(obj).then((res)=>{
                    this.clear();
                    this.$refs.form.resetFields();
                    this.$message({
                    message: res.msg,
                    type: "success",
                    });
                    this.$router.push({path:'/home'});
                })
               
                
            }else {
                this.$message.error("请检查是否有必填未输入");
                return false;
            }
            });
        },
        //取消提交
        cancelClick(){

        },
        // 所属分类的change事件
        classIdChange(){
            this.$set(this.form,'category_id',this.type_id[0]);
            this.$set(this.form,'category_ids',this.type_id[1]);
        },
        //所在省份change事件
        provinceChange(){
            this.$set(this.form,'province_id',this.provinceAll[0]);
            this.$set(this.form,'city_id',this.provinceAll[1]);
            this.$set(this.form,'area_id',this.provinceAll[2]);
        },
    //图片上传 VVVVVVVVVVVVVVVV
        handleAvatarSuccess(res, file) {
            console.log(res);
            this.picturesArr.push(res.data.file_path);
        },
        // 最多上传6张图，超过时隐藏上传按钮
        handleEditChange(file, fileList) {
            this.hideUploadBtn = fileList.length >= 15;
        },
        //全部删除图片
        deleteAllPic(){
            this.picturesArr = [];
            this.fileList2 = [];
        },
        //单个图片点击删除
        handleRemove(file, fileList) {
            this.fileList2 = fileList;
            var arr=[];
            fileList.forEach(item => {
            arr.push(item.response.data.file_path);
            });
            this.picturesArr = arr;
            this.hideUploadBtn = fileList.length >= 15;
            
        },
    //VVVVVVVVVVVVVVVVVVVVVVVVVVVV
        getlotsTypeList(){
            areaTree().then(res=>{
            var arr = this.areatreeAfter(res.data)
            this.provinceOptions = arr;
            });

            LotsTypeList().then((res) => {
                this.class_idOptions = res.data;
            });
        },
        areatreeAfter(data){
            for(var i=0;i < data.length; i++){
            var obj={
                value:data[i].id,
                label:data[i].name,
                children:data[i].children,
            }
            
            data[i]=obj;
            if(data[i].children){
                this.areatreeAfter(data[i].children);
            }
            }
            return data
        },
        clear(){
            this.picturesArr=[];
            this.fileList2=[];
            this.provinceAll=[];
            this.type_id=[];
        },
    }
}
</script>
<style lang="less">
.applyFor{
  padding: 10px 0;
  .tit_big{
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 30px 0;
  }
    .divDialogFooter{
        text-align: center;
        .btn_zx{
          margin-right: 20px;
        }
    }

}
.ql-container{
      height: 100px;
    }
</style>